<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('取消自动上传')}`">{{ $t('取消自动上传') }}</t>
            <li>
                配置<span class="s-code">autoUpload</span>为<span class="s-code">false</span>即可取消自动上传
            </li>
        </template>
        <sib-item v-model="value" :props="props" @change="change"></sib-item>
        <pre-code v-if="preCode.length" :code="preCode" style="height: 300px;"></pre-code>
    </example>
</template>

<script>
import { ref, reactive, nextTick } from 'vue';

export default {
    setup() {
        const preCode = ref('');
        const value = ref(null);
        const props = reactive({
            type: 'upload',
            listType: 'picture-card',
            autoUpload: false,
        });

        return {
            props,
            value,
            preCode,
            change(data) {
                preCode.value = '';
                nextTick(() => {
                    preCode.value = data.value.length && JSON.stringify(data.value, null, 8) || '';
                });
            },
            templateString: `<template>
    <sib-item v-model="value" :props="props"></sib-item>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(null);
        const props = reactive({
            type: 'upload',
            listType: 'picture-card',
            autoUpload: false,
        });

        return { props, value };
    },
};
<\/script>`,
        };
    },
};
</script>
